<template>
  <pull-to @infinite-scroll="loadmore">
    <div class="js-books p20">
      <div class="box-desc">
        <em class="red bold">声明：以下PDF 书籍是由作者收集并共享，不得以各种方式进行售卖！知识共享，请大家尊重书籍作者，请购买正版图书！</em>
      </div>
      <div class="book-list mt20">
        <template v-for="item of booksList">
          <dl class="books-item" :key="item.book_id">
            <dd class="book-name" :title="item.book_name">{{item.book_name}}</dd>
            <dd class="book-time p10">
              <span>类型:{{item.book_type}}</span>
              <span>时间:{{item.book_date}}</span>
            </dd>
            <dt class="book-cover mt2" :style="{background:'url('+item.book_cover+') center/cover no-repeat'}"></dt>
            <dd class="book-desc mt5 p10" :title="item.book_desc">
              {{item.book_desc}}
            </dd>
            <dd class="book-download pointer mt5 p10" @click="downloadPDF(item)">
              立即下载
            </dd>
          </dl>
        </template>
      </div>
      <modal v-if="showModal" @suerSubmit="showModalDialog" @close="showModal=false">
        <h3 slot="header">文档下载</h3>
        <div slot="body">
          <small>密匙</small>:{{item.book_code}}</div>
      </modal>
      <a :href="url" id="downloadUrl" target="_blank"></a>
    </div>
  </pull-to>
</template>

<script>
import PullTo from "vue-pull-to";
import service from '@/service';
import modal from "@/components/common/dialog";
export default {
  data() {
    return {
      booksList: [],
      item: {},
      showModal: false,
      url: "",
      page: 1,
      pageSize: 10,
      isDate: true
    };
  },
  created() {
    this.getBooksList();
  },

  methods: {
    loadmore() {
      if (this.isDate) {
        setTimeout(() => {
          if (!this.isNotData) {
            this.getBooksList(this.page + 1);
          }
        }, 500);
      }
    },
    downloadPDF(item) {
      this.item = item;
      this.showModal = true;
    },
    async getBooksList(page = 1) {
      let loading = document.getElementById('show-loading')
      loading.style.display = 'flex'
      let params = {
        page: page,
        pageSize: this.pageSize
      }
      let result = await service.queryBooksByPageList(params);
      if (result.success) {
        if (result.data.pageList.length < 10) {
          this.isDate = false;
        }
        this.booksList = this.booksList.concat(result.data.pageList);
        loading.style.display = 'none'
      } else {
        loading.style.display = 'none'
      }
    },
    showModalDialog() {
      let downloadUrl = document.querySelector("#downloadUrl");
      this.url = this.item.book_url;
      setTimeout(() => {
        downloadUrl.click();
      }, 500);

      this.showModal = false;
    }
  },
  components: {
    modal,
    PullTo
  }
};
</script>

<style scoped>
.book-list {
  display: flex;
  flex-wrap: wrap;
}
.book-list dl {
  margin-right: 10px;
  margin-top: 10px;
}
.books-item dd {
  background: #fff;
}
.book-desc{
  height: 120px;
  color: #666;
  overflow: hidden;
}
.books-item {
  float: left;
  width: 300px;
  border: 1px solid #f4f4f4;
  padding: 10px;
  background: #f4f4f4;
}
.book-name {
  padding: 10px;
  border-bottom: 1px solid #f4f4f4;
  font-size: 14px;
  font-weight: bold;
  color: slategray;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.book-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f4f4f4;
  color: slategray;
}
.book-cover {
  background: url("/static/images/timg.jpeg") center no-repeat;
  width: 100%;
  height: 200px;
  background-size: cover;
}
.books-item .book-download {
  background: #42b983;
  text-align: center;
  color: #fff;
}
</style>